<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			<style type="text/css">* {
				margin: 0;
				padding: 0;
			}
			
			.nav {}
			
			.nav ul {
				white-space: nowrap;
				list-style: none;
				position: absolute;
				left: 50%;
				top: 10%;
				transform: translateX(-50%);
				font-size: 20px;
				font-weight: bold;
			}
			
			.nav ul li a {
				width: 100px;
				display: block;
				text-decoration: none;
				text-align: center;
				padding: 5px 0;
				margin: 0 8px;
				color: #44c6fb;
				position: relative;
			}
			
			.nav ul li a:after {
				content: "";
				display: block;
				width: 0px;
				height: 3px;
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translate(-50%);
				background-color: #44c6fb;
				transition: width 700ms ease;
			}
			
			.nav ul li a:hover:after {
				width: 60%;
			}
			
			.nav ul li a:hover {
				color: gray;
			}
			
			.float {
				float: left;
			}
			
			.clear_float {
				clear: both;
			}
		</style>
		</style>
	</head>

	<body>
		<div class="nav">
			<ul class="clear_float">
				<li class="float"><a href="">张爱玲</a></li>
				<li class="float"><a href="">刘德华</a></li>
				<li class="float"><a href="">陈粒</a></li>
				<li class="float"><a href="">叶问</a></li>
			</ul>
		</div>
	</body>

</html>